import model from './model'
import * as echarts from 'echarts'

export default {
  data() {
    return {
      model: model(),
      // 图表id
      chartsId: null,
    }
  },
  props: {
    /**
     * id
     */
    id: {
      type: String,
      default: '',
    },
    /**
     * width
     */
    width: {
      type: String,
      default: '100px',
    },
    /**
     * height
     */
    height: {
      type: String,
      default: '100px',
    },
    /**
     * 图表数据
     */
    dataList: {
      type: Array,
      default: [],
    },
    /**
     * 图表X轴数据
     */
    axisList: {
      type: Array,
      default: () => [],
    },
    /**
     * x轴数据是否倾斜
     */
    rotateWhether: {
      type: Boolean,
      default: false,
    },
    /**
     * 主题
     */
    theme: {
      type: String,
      default: 'default',
    },
  },
  watch: {
    /**
     * 监听数据更新图表
     */
    width() {
      this.getCharts()
    },
    /**
     * 监听数据更新图表
     */
    dataList() {
      this.getCharts()
    },
    /**
     * 监听数据更新图表
     */
    theme() {
      this.getCharts()
    },
  },
  methods: {
    getCharts() {
      this.chartsId = 'chartsId2'
      // 基于准备好的dom，初始化echarts实例
      const colorList = ['#09d7e7', '#4a5cfd', '#8ed3fb', '#4692fd', '#cca856', '#3c4eaf']
      let myChart = null
      if (myChart !== null && myChart !== '' && myChart !== undefined) {
        myChart.dispose()
      } else {
        myChart = echarts.init(document.getElementById(this.id))
      }
      /*
       * 绘制图表
       */
      const option = {
        // ---- gird区域 ---
        grid: {
          top: '5%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true,
        },
        color: colorList,
        textStyle: {
          color: { default: '#606D84', violet: '#606D84', 'deep-blue': '#fff' }[this.theme],
        },
        tooltip: {
          trigger: 'axis',
          confine: true,
        },
        xAxis: {
          axisTick: {
            show: false,
          },
          type: 'category',
          boundaryGap: false,
          data: this.axisList,
          axisLabel: this.rotateWhether
            ? {
              interval: 0,
              rotate: 40,
            }
            : {},
        },
        yAxis: [
          {
            type: 'value',
            interval: 'auto',
            splitLine: {
              show: false,
            },
          },
        ],
        series: this.dataList,
      }
      myChart.setOption(option)
    },
  },
  mounted() {
    this.getCharts()
  },
}
